<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>student</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div id="app">
    <div style="height: 585px">
        姓名:<input v-model="QueryEmp.name">
        科室:<input v-model="QueryEmp.oname">
        职位:<input v-model="QueryEmp.position">
        <button class="btn  btn-warning" @click="changePage(1)">搜索</button>
        <button class="btn  btn-success" @click="downloadEmp()">导出员工信息</button>

        <table class="table table-bordered table-hover table-striped" id="t">
            <tr>
                <th>员工账号</th>
                <th>姓名</th>
                <th>学历</th>
                <th>电话</th>
                <th>职称</th>
                <th>部门</th>
                <th>科室</th>
                <th>操作</th>
            </tr>
            <tr v-for="(p,i) in info">
                <td v-text="p.account"></td>
                <td v-text="p.name"></td>
                <td v-text="p.education"></td>
                <td v-text="p.tel"></td>
                <td v-text="p.position"></td>
                <td v-text="p.dname"></td>
                <td v-text="p.oname"></td>
                <td v-if="p.status == 0">在职</td>
                <td v-else>离职</td>
                <td>
                    <button class="btn  btn-warning" @click="upp(p.account)">详情</button>
                </td>
            </tr>
        </table>
    </div>
    <div>
        <center>
            <button @click="changePage(1)">首页</button>
            <button @click="changePage(pageinfo.prePage)">上页</button>
            <button @click="changePage(pageinfo.nextPage)">下页</button>
            <button @click="changePage(pageinfo.totalPage)">尾页</button>
            <br>
            <center>当前 {{pageinfo.currentPage}} / {{pageinfo.totalPage}} 页  共 {{pageinfo.totalCount}}条 每页 {{pageinfo.currentCount}}条</center>
        </center>
    </div>

</div>

<script>


    var app = new Vue ({

        el:"#app",
        data:{

            info:[],
            QueryEmp:{
                name:"",
                oname:"",
                position:""
            },
            pageinfo:{}

        },
        methods:{
            changePage:function (a) {
                getData(a, 10);
            },

            upp:function(account) {
                window.location.href="/ssm/empupdate.html?account="+account;
            },

            downloadEmp:function () {
                window.location.href="/ssm/data/downloadEmpExcle?currentPage=1&currentCount=5000&name="+app.QueryEmp.name+"&oname="+app.QueryEmp.oname+"&position="+app.QueryEmp.position;
            }

        }

    });

    function getData(page,count) {
        app.QueryEmp.currentPage = page;//第几页
        app.QueryEmp.currentCount = count;//每页多少条

        $.post("/ssm/admin/queryEmp",app.QueryEmp,function (backData) {
            app.info = backData.data.pageData;
            app.pageinfo = backData.data.pageInfo;
        })
    }
    getData(1,10);

</script>

</body>
</html>